import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter)

/**
 * 配置路由规则（重点配置区域）
 */
const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import(/* webpackChunkName: "home" */ '../views/HomeView.vue')
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/center',
    name: 'center',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "center" */ '../views/CenterView.vue'),
    children: [
      {
        path: "",
        name: "center-first",
        component: () => import(/* webpackChunkName: "center" */ '../views/center/FirstView.vue'),
      },
      {
        path: "second",
        name: "center-second",
        component: () => import(/* webpackChunkName: "center" */ '../views/center/SecondView.vue'),
      },
      {
        path: "third",
        name: "center-third",
        component: () => import(/* webpackChunkName: "center" */ '../views/center/ThirdView.vue'),
      }
    ]
  },
  {
    path: '/images',
    name: 'images',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "images" */ '../views/ImagesView.vue')
  },
  {
    path: "/params/:id",
    name: "params",
    component: () => import(/* webpackChunkName: "params" */ '../views/ParamsView.vue'),
    // props: true
    props: route => ({params: route.params})
  },
  {
    path: '/admin',
    name: 'admin',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "admin" */ '../views/AdminView.vue'),
    children: [
      {
        path: "zjbc",
        name: "zjbc",
        component: () => import(/* webpackChunkName: "zjbc" */ '../views/admin/ZjbcView.vue'),
      },
      {
        path: "sccy",
        name: "sccy",
        component: () => import(/* webpackChunkName: "sccy" */ '../views/admin/SccyView.vue'),
      },
      {
        path: "zlzs",
        name: "zlzs",
        component: () => import(/* webpackChunkName: "zlzs" */ '../views/admin/ZlzsView.vue'),
      },
      {
        path: "user",
        name: "user",
        component: () => import(/* webpackChunkName: "user" */ '../views/admin/UserView.vue'),
      },
    ]
  },
  {
    path: '*',
    name: 'not-found',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "not-found" */ '../views/NotFound.vue')
  }
]

/**
 * 创建路由对象（不用修改）
 */
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router
